<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Registry State</title> 
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page --> 
		<script type="text/javascript" src="/chopper/js/jquery-1.5.2.js"></script> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/highcharts.js"></script> 
		
		<!-- 1a) Optional: add a theme file --> 
		<!-- <script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/themes/gray.js"></script> --> 

		
		<!-- 1b) Optional: the exporting module --> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/modules/exporting.js"></script> 
		
		<script type="text/javascript"> 
		
			var InvokeCountChart;
			$(document).ready(function() {
				InvokeCountChart = new Highcharts.Chart({
					chart: {
						renderTo: 'remote_interface_statistics',
						defaultSeriesType: 'column'
					},
					title: {
						text: 'Remote Interface Invoke Count'
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						categories: [
							'Invoke Count'
						]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Count'
						}
					},
					tooltip: {
						formatter: function() {
							return this.x +': '+ this.y;
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
				        series: [{
						name: 'Bind Name',
						data: []
				
					}]
				});

				var categories = ['hw','pp','aa','mm','tt'];
				InvokeCountChart.xAxis[0].setCategories(categories,true);
			});
				
		</script> 
<title>Remote Interface Statistics View</title>
</head>
<body style="background-color: #AFEEEE; text-align: center;">
<jsp:include page="head.html"/>		
	<div style="font-size:20pt;margin-bottom: 30px;">Remote Interface Statistics</div>
		<div id="remote_interface_statistics" style="width: 800px; height: 400px; margin: 0 auto"></div> 
		<script type="text/javascript"> 
			function updateData(){
				$.ajax({  
                    url:'/chopper/RemoteInterfaceStatistics',  
                    dataType:'json', 
                    error:function(){  
                        alert("error occured in getting data from server!");  
                    },  
                    success:function(data){  
                        var riName = new Array();
						var invokeCount = new Array();
                        $.each(data,function(index){  
                            var i=0;
                            $.each(data[index],function(key,value){  
                            	riName[i] = key;
            					invokeCount[i] = value;
            					i++;
                            });  
                        }); 
                        InvokeCountChart.xAxis[0].setCategories(riName,false);
                        InvokeCountChart.series[0].setData(invokeCount);
                    }  
                }); 			
			};
			updateData();
			setInterval(function(){
				updateData();
			}, 5000);
			
		</script>
<jsp:include page="foot.html"/>		
</body>
</html>